<style scoped>
  .img-view {
    width: 150px;
    height: 100px;
  }
</style>
<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      ok-text="确认保存"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="600px">
      <div style="margin-left: 180px; font-size: 15px">
        已确认编辑信息
      </div>
        <!-- <Row style="margin-bottom: 15px">
          <Col span='7'>版页类型：</Col>
          <Col span='8'>{{confirmData.type === '0' ? '口碑结算' : ''}}</Col>
        </Row> -->
        <!-- <Row style="margin-bottom: 15px">
          <Col span='7'>结算方式：</Col>
          <Col span='8'>{{confirmData.type === '3' ? '口碑结算' : confirmData.type === '1' ? '到店结算' : confirmData.type === '2' ? '成交结算' : confirmData.type === '4' ? '销售素材' : ''}}</Col>
        </Row>
        <div v-show="confirmData.type !== '4'">
          <Row style="margin-bottom: 15px">
            <Col span='7'>活动时间：</Col>
            <Col span='8'>{{confirmData.btime ? this.$moment(confirmData.btime).format('YYYY/MM/DD') : ''}} - {{confirmData.etime ? this.$moment(confirmData.etime).format('YYYY/MM/DD') : ''}}</Col>
          </Row>
          <Row style="margin-bottom: 15px">
            <Col span='7'>任务名称：</Col>
            <Col span='8'>{{confirmData.name}}</Col>
          </Row>
          <Row style="margin-bottom: 15px">
            <Col span='7'>任务要求：</Col>
            <Col span='8'>{{confirmData.des}}</Col>
          </Row>
          <Row v-show="confirmData.type === '3'" style="margin-bottom: 15px">
            <Col span='7'>预算佣金总额：</Col>
            <Col span='8'>{{confirmData.budget}}</Col>
          </Row>
          <Row v-show="confirmData.type === '3'" style="margin-bottom: 15px">
            <Col span='7'>单次口碑点击量金额：</Col>
            <Col span='8'>{{confirmData.permoney}}</Col>
          </Row>
          <Row v-show="confirmData.type === '1' || confirmData.type === '2'" style="margin-bottom: 15px">
            <Col span='7'>任务佣金：</Col>
            <Col span='8'>{{confirmData.type === '1' ? confirmData.budget : confirmData.type === '2' ? confirmData.perrate : ''}}</Col>
          </Row>
          <Row v-show="confirmData.type === '2'" style="margin-bottom: 15px">
            <Col span='7'>商品价格：</Col>
            <Col span='8'>{{confirmData.permoney}}</Col>
          </Row>
        </div>
        <Row style="margin-bottom: 15px">
          <Col span='7'>内容类型：</Col>
          <Col span='8'>{{confirmData.tctype === '0' ? 'H5' : confirmData.tctype === '1' ? '图文' : confirmData.tctype === '2' ? '视频' : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>关联内容：</Col>
          <Col span='8'>
            <img :src="row.tcimg ? 'http://static.baisha.work'+row.tcimg : ''" alt="" class="img-view">
          </Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>排序：</Col>
          <Col span='8'>{{confirmData.sort}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>是否置顶：</Col>
          <Col span='8'>
            <i-switch v-model="confirmData.strickState" />
          </Col>
        </Row> -->
        <!-- <Row style="margin-bottom: 15px">
          <Col span='7'>是否开启：</Col>
          <Col span='8'>
            <i-switch v-model="confirmData.openState" />
          </Col>
        </Row> -->
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'TaskListConfirmModal',
  props: {
    confirmData: {}
  },
  data () {
    return {
      title: '',
      loading: true,
      form: {
        time: '',
        type: '',
        method: '',
        task: '',
        title: '',
        taskmoney: '',
        order: '',
        state: ''
      }
    }
  },
  updated () {
    this.title = '确认框'
  },
  computed: {
    ...mapState({
      taskList: state => state.taskList.taskList,
      row: state => state.taskList.row,
      modalState: state => state.modal.confirmModalState
    })
  },
  methods: {
    ...mapActions(['updateConfirmModalState', 'updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('confirm-task-list-valid')
    },
    cancel () {
      this.updateConfirmModalState(false)
      this.updateModalState(true)
    }
  }
}
</script>
